<template>
  <div style="padding: 12px">
    <a-row :gutter="12">
      <a-col :span="12">
        <Upload ref="left"></Upload>
      </a-col>
      <a-col :span="12">
        <Upload ref="right"></Upload>
      </a-col>
    </a-row>

    <a-space style="display: flex; align-items: center; justify-content: center; margin-top: 18px">
      <a-button type="primary" style="width: 100px" @click="handleClear">重置</a-button>
      <a-button type="primary" style="width: 100px" @click="handleShowMerge">合并</a-button>
      <!-- <a-button type="primary" style="width: 100px" @click="exportExcel">导出Excel</a-button> -->
    </a-space>

    <a-modal
      v-model:open="open"
      width="80vw"
      height="80vh"
      title="合并"
      okText="导出Excel"
      @ok="exportExcel"
    >
      <a-space>
        <span>选择要计算的列:</span>
        <a-select
          ref="select"
          v-model:value="key"
          style="width: 240px"
          placeholder="选择需要计算的字段"
        >
          <a-select-option :value="item.title" v-for="item in columns">{{
            item.title
          }}</a-select-option>
        </a-select>
        <a-button type="primary" style="width: 100px" @click="handleMerge">开始合并</a-button>
      </a-space>

      <a-table
        style="margin-top: 6px"
        bordered
        size="small"
        :dataSource="dataSource"
        :columns="columns"
      ></a-table>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import Upload from './Upload.vue'
import { message } from 'ant-design-vue'
import * as XLSX from 'xlsx'
import { ref } from 'vue'
const open = ref(false)
const left = ref<any>(null)
const right = ref<any>(null)
const columns = ref<any[]>([])
const dataSource = ref<any[]>([])
const key = ref()
let excludeList: any[] = []
const merge = ref(false)

let leftData: any[] = []
let rightData: any[] = []

const handleShowMerge = () => {
  leftData = left.value.getDataSource()
  rightData = right.value.getDataSource()
  if (!leftData.length || !rightData.length) {
    message.error('请先选择要合并的文件')
    return
  }
  open.value = true
  columns.value = left.value.getColumns() as any[]
}

const getUUID = (item: any) => {
  let uuid = ''
  columns.value
    .filter((v) => key.value !== v.dataIndex)
    .forEach((v) => {
      uuid += item[v.dataIndex]
    })
}
const handleClear = () => {
  left.value.clear()
  right.value.clear()
  merge.value = false
  dataSource.value = []
  leftData = []
  rightData = []
  key.value = null
  excludeList = []
  columns.value = []
}
const handleMerge = () => {
  if (!key.value) {
    message.error('请先选择要计算的列')
    return
  }
  leftData = leftData.map((v) => ({
    ...v,
    uuid: getUUID(v)
  }))

  rightData = rightData.map((v) => ({
    ...v,
    uuid: getUUID(v)
  }))

  const _dataSource: any[] = []
  leftData.forEach((item: any) => {
    const rItem = rightData.find((v: any) => item.uuid === v.uuid)
    if (rItem) {
      excludeList.push(rItem.uuid)
    }
    _dataSource.push({
      ...item,
      ...(rItem ? { [key.value]: item[key.value] * 1 + rItem[key.value] * 1 } : {})
    })
  })
  const _rightData = rightData.filter((v) => !excludeList.includes(v.uuid))
  dataSource.value = [..._dataSource, ..._rightData]
  merge.value = true
}

const exportExcel = () => {
  if (!leftData.length || !rightData.length) {
    message.error('请先选择要合并的文件')
    return
  }

  if (!merge.value) {
    message.error('请先点击合并')
    return
  }
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, getSheet(dataSource.value), '合并表')
  XLSX.utils.book_append_sheet(wb, getSheet(leftData), '左表')
  XLSX.utils.book_append_sheet(wb, getSheet(rightData), '右表')
  XLSX.writeFile(wb, 'data.xlsx')
}

const getSheet = (list: any[]) => {
  const headers = columns.value.map((v) => v.dataIndex)
  const data = list.map((v) => {
    return columns.value.map((column) => v[column.dataIndex])
  })

  return XLSX.utils.aoa_to_sheet([headers, ...data])
}
</script>
<style lang="less" scoped></style>
